<template>
    <div class="zongkuang">
        &nbsp
        <div class="sousuo" @click="search">
            <img class="VipImg" src="../../../assets/img/waimai/Vipsousuo.webp">
            <div class="lunbo">鲜活大闸蟹8只89元</div>
            <button>搜索</button>
        </div>
        <ZhiDaWch/>
        <SwiperWch/>
        <StoresComFls/>
    </div>
</template>

<script>
    import ZhiDaWch from "./ZhiDaWch.vue";
    import SwiperWch from "./SwiperWch.vue";
    import StoresComFls from "../../StoresComFls.vue";

    export default {
        name: "LocationWch",
        components: {StoresComFls, SwiperWch, ZhiDaWch},
        methods: {
            search() {
                this.$router.push("/search-view")
            }
        }
    }
</script>

<style scoped>
    .zongkuang {
        height: 183vh;
        width: 100vw;
        background-color: rgb(245, 245, 245);
        margin-top: -15px;
        border-radius: 20px;
    }

    .sousuo {
        width: 95vw;
        height: 36px;
        background-color: rgb(255, 255, 255);
        margin: 0 auto;
        position: sticky;
        top: 0;
        text-align: center;
        border-radius: 25px;
        border: 1px #ffce00 solid;
        z-index: 2
    }

    button {
        margin-top: -1px;
        margin-right: -1px;
        width: 60px;
        height: 38px;
        float: right;
        border: 0;
        padding: 0;
        background-color: #ffce00;
        border-radius: 25px;
        font-size: 18px;
    }

    .lunbo {
        float: left;
        margin-top: 8px;
        margin-left: 20px;
        color: #c2c2c2;

    }

    .VipImg {
        float: left;
        width: 20px;
        margin-left: 10px;
        margin-top: 8px;
    }
</style>